<template>
  <div id="detail-info">
    <div class="left">

    </div>
    <div class="center">
      <h1 class="text-4xl font-bold">
        {{ title }}
      </h1>
      <a-divider/>
      <Viewer :value="content" :plugins="plugins"/>
    </div>
    <div class="right">

    </div>
  </div>
</template>

<script setup lang="ts">
import {Viewer} from '@bytemd/vue-next'
import {onMounted, ref} from "vue";
import gfm from "@bytemd/plugin-gfm";
import {gfm_Hans} from "../../plugins/zh_Hans.js";
import gemoji from "@bytemd/plugin-gemoji";
import frontmatter from "@bytemd/plugin-frontmatter";
import highlight from "@bytemd/plugin-highlight";
import {useRoute} from "vue-router";
import myAxios from "../../plugins/myAxios.ts";
import './index.css'

const route = useRoute()
const title = ref()
const content = ref()
const plugins = [
  gfm({
    locale: gfm_Hans
  }),
  gemoji(),
  frontmatter(),
  highlight(),
]

const getPostById = () => {
  myAxios.get(`/post/get/vo?id=${route.params.id}`).then(res => {
    title.value = res.data.title
    content.value = res.data.content
  })
};
onMounted(() => {
  getPostById()
  console.log()
})

</script>

<style scoped>
#detail-info {
  width: 100vw;
  margin-top: 20px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  background-color: #F2F3F5;
}

.left {
  grid-area: 1 / 1 / 6 / 2;
}

.center {
  grid-area: 1 / 2 / 6 / 4;
  background-color: #fff;
  margin-top: 20px;
  padding: 1rem 2rem;
}

.right {
  grid-area: 1 / 4 / 6 / 5;
}
</style>